<h2 class="text-center">Panels and Wells , Alert and Listgroups</h2>
      <hr id="panels">

<div class="container">
  <div class="row">
    <div class="col-sm-6">
      
      <div class="panel panel-primary">
        <div class="panel-heading">
          Earth 
        </div>
          <div class="panel-body">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. In inventore provident explicabo!
            <div class="panel-footer"> Earth Footer
          </div> 
        </div> <!--panel-body-->

      </div> <!--panel-->


      <div class="panel panel-success">
        <div class="panel-heading">
          Trees 
        </div>
          <div class="panel-body">
           Lorem ipsum dolor sit amet, consectetur adipisicing elit. In inventore provident explicabo!
            <div class="panel-footer"> Trees Footer
          </div> 
        </div> <!--panel-body-->

      </div> <!--panel-->

      


    </div> <!--col-sm-6-->


            <div class="col-sm-6">


                  <a href="#" class="btn btn-primary " id="btn-alert">Click Here to Show Alert</a>


      <div class="alert alert-warning alert-dismissible" id="warningalert"role="alert">
     

       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
      </button>
       

     <strong>Warning!</strong> Your Planet is in danger
   </div>

        <ul class="list-group">
         <li class="list-group-item disabled">Nature</li>
          <li><a href="#" class="list-group-item ">mountain</a> </li>
          <li><a href="#" class="list-group-item">desert</a></li>
                               

        </ul>


       <div class="well">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam, eum.
       </div>
    </div>
  </div> <!--row-->